//1、完成基础需求， 然后创建store文件
import './index.css'

import React from 'react'
import { useDispatch, useSelector } from "react-redux";

//引入action，通过事件向store中传入数据
import { incrementAction , decrementAction } from '../../store/slice/countSlice';

export default function Count() {
  //创建dispacth向store传递数据
  const dispatch = useDispatch()
  //获取数据
  const count = useSelector(state=>
    state.count.count
  )
  
  // console.log(count);
  //累加
    const incrementHandle = ()=>{
      dispatch(incrementAction(1))
    }

    // 累减de
    const decrementHandle = ()=>{
      dispatch(decrementAction(5))
      
    }

    // 奇数时累加
    const ifOddIncrementHandle = ()=>{
      if(count%2 !== 0 ){
        dispatch(incrementAction(3))
      }
    }

    //因为方便管理，所以使用专门处理的文件夹action和常数文件countConst来处理
  
  
  return (
    <div>
      <h1>这是变化的数据<span>{count}</span></h1>

      <button onClick={incrementHandle}>累加</button>&nbsp;
      <button onClick={decrementHandle} >累减</button> &nbsp;
      <button onClick={ifOddIncrementHandle}>奇数时累加</button> &nbsp;
    </div>
  ) 
}
